---
interface Props {
    direction?: 'row' | 'column';
    alignItems?: 'center' | 'start' | 'end' | 'self-start' | 'self-end' | 'flex-start' | 'flex-end';
    justifyContent?: 'center' | 'start' | 'end' | 'self-start' | 'self-end' | 'flex-start' | 'flex-end';
    gap?: 'size-6' | 'size-10';
    mobileWrap?: boolean;
}

const { direction, alignItems, justifyContent, gap, mobileWrap } = Astro.props as Props;

const style = {
    ...(alignItems && { 'align-items': alignItems }),
    ...(justifyContent && { 'justify-content': justifyContent }),
};
---

<div
    class:list={[
        'flexContainer',
        direction,
        {
            gapSize6: gap === 'size-6',
            gapSize10: gap === 'size-10',
            mobileWrap: mobileWrap,
        },
    ]}
    style={style}
>
    <slot />
</div>

<style lang="scss">
    @use 'design-system' as *;

    .flexContainer {
        display: flex;

        &.gapSize6 {
            gap: $spacing-size-6;
        }

        &.gapSize10 {
            gap: $spacing-size-10;
        }

        &.row {
            flex-direction: row;
        }

        &.column {
            flex-direction: column;
        }

        &.mobileWrap {
            @media screen and (max-width: 720px) {
                flex-wrap: wrap;
                justify-content: center;
            }
        }

        :global(.image-caption) {
            margin: 0;
        }
    }
</style>
